<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用layui</title>
    <script type="text/javascript" src="static/js/jquery.js"></script>
    <script type="text/javascript" src="static/js/jquery.form.js"></script>
    <script type="text/javascript" src="static/js/helpsNew.js"></script>
    <link rel="stylesheet" href="static/css/checkbox.css">
    <link rel="stylesheet" href="static/css/ocr.css">
    <link rel="stylesheet" href="static/layui/css/layui.css">
</head>

<body class="layui-layout-body">
<script src="static/layui/layui.js"></script>


<div style="padding: 20px; background-color: #F2F2F2;min-height: 100vh; overflow-y: scroll;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md9">
            <div class="layui-card">
                <div class="layui-card-header">YOLOv3 + CRNN 深度学习ChineseOCR模型 实现中文自然场景文字检测及识别 </div>
                <div class="layui-card-body">
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">检测模式</label>
                            <div class="layui-input-block">
                                <input type="checkbox" lay-filter="textmode" name="like[write]" title="文字方向检测" id="textAngle" checked>
                                <input type="checkbox" lay-filter="textmode" name="like[read]" title="单行文字识别" id="textLine">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">输出模式</label>
                            <div class="layui-input-block" id="modeId">
                                {% for index,bill in enumerate(post['billList'])%}
                                <input type="radio" name="output" value="{{index}}" title="{{bill}}"
                                       id="billModel_{{index}}">
                                {% end %}
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">上传图片</div>
                <div class="layui-card-body">
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">选择文件</label>
                            <div class="layui-input-block">
                                <div class="layui-upload-drag" id="upload" style="padding: 5px">
                                    <i id='hidden1' class="layui-icon"></i>
                                    <p id='hidden2'>点击上传，或将文件拖拽到此处</p>
                                    <div class="" id="imgeList">
                                        <!--<img id='preview' width="400" height="300" src="">-->
                                        <!--<canvas id="myCanvas" width="800" height="600" style="z-index:1;"></canvas>-->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="layui-col-md3" style="min-width: 300px">
            <div class="layui-card">
                <div class="layui-card-header">识别结果</div>
                <div class="layui-card-body">
                    <div id="taketime"></div>
                    <!#############################识别结果######################################################### ---->
                    <div class="layui-form">
                        <table class="layui-table">
                            <colgroup>
                                <col width="150">
                                <col width="150">
                                <col width="200">
                                <col>
                            </colgroup>
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>值</th>
                            </tr>
                            </thead>
                            <tbody id="tbody">
                            </tbody>
                        </table>
                    </div>
                    <!##############################识别结果######################################################### ---->
                </div>
            </div>
        </div>
    </div>
    <img id='loadingGif' width="128" height="128" src="static/img/loading.gif"
         style="position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%) scale(0.5);z-index:3;display:none"></img>
</div>


<script>
    imgJson = {
        "imgString": "",
        "billModel": "",
        "num": 0,
        "url": "",
        "result": "",
        "timeTake": 0.0,
        "textAngle": true,
        "textLine": false,
        'ocrFlag': false
    };
    imgBoxes = [];
    imgRate = 1;

    function addImage(img, result) {
        var image = String.format('<img id="preview"  width="{0}" height="{1}" src="{2}" class="layui-upload-img" style="margin-bottom: 2px;z-index:2;">'
            , img.width, img.height, result);
        $('#imgeList').append(image);
    }

    function addCanvas(img) {
        var image = String.format('<canvas id="myCanvas"  width="{0}" height="{1}" style="margin-bottom: 2px;z-index:2;">'
            , img.width, img.height);
        $('#imgeList').append(image);
    }


    //一般直接写在一个js文件中
    layui.use(['layer', 'form'], function () {
        var layer = layui.layer
            , form = layui.form;
        layer.msg('Hello World');
        form.on('radio', function (data) {
            //console.log(data.elem); //得到radio原始DOM对象
            //console.log(data.value); //被点击的radio的value值
//            if (data.value == 0) {
//                console.log('0');
//            }
            imgJson.billModel = data.elem.title;
        });

        form.on('checkbox(textmode)', function (data) {
//            layer.tips('开关checked：' + (this.checked ? 'true' : 'false'), data.othis);
            if(data.elem.id == "textLine"){
                imgJson.textLine = this.checked ? 'true' : 'false'
            }else if(data.elem.id  == "textAngle") {
                imgJson.textAngle = this.checked ? 'true' : 'false'
            }
        });
    });


    layui.use('upload', function () {
        //执行实例
        var upload = layui.upload;
        var uploadInst = upload.render({
            elem: '#upload', //绑定元素
            url: '/ocr', //上传接口
            data: {
                billModel: function () {
                    return imgJson.billModel;
                },
                textLine:function () {
                    return imgJson.textLine;
                },
                textAngle:function () {
                    return imgJson.textAngle;
                }
            },
            choose: function (obj) {
//                将每次选择的文件追加到文件队列
//                var files = obj.pushFile();
                //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                obj.preview(function (index, file, result) {
//                    console.log(index); //得到文件索引
//                    console.log(file); //得到文件对象
//                    console.log(result); //得到文件base64编码，比如图片
                    $('#preview').remove();
                    $('#hidden1').remove();
                    $('#hidden2').remove();
                    var img = new Image();
                    img.src = result;
                    loadingGif('loadingGif');
                    $('#myCanvas').remove();
                    //待图片加载完后，将其显示在canvas上
                    img.onload = function () {
//                      addImage(img,result);
                        addCanvas(img);
                        var cvs = document.getElementById("myCanvas");
                        var ctx = cvs.getContext('2d');
                        ctx.drawImage(this, 0, 0);//this即是imgObj,保持图片的原始大小：470*480
                        //ctx.drawImage(this, 0, 0,1024,768);//改变图片的大小到1024*768
                    };
                });
            },
            done: function (res) {
                loadingGif('loadingGif');
                imgJson['num'] = 0;//防止重复提交
                imgJson["result"] = res['res'];
                imgJson["timeTake"] = res['timeTake'];
                W = imgJson["width"];
                H = imgJson["height"];
                imgJson['ocrFlag'] = false;
                //上传完毕回调
                createTable(res["res"], res["timeTake"]);
            }
            ,
            error: function () {
                loadingGif('loadingGif');
                //请求异常回调
            }
        });
    });

    $('input:radio[name=output]')[0].checked = true;

</script>

</body>
</html>